<template>
   <div class="wrap">
        <div class="table-box" v-loading="loading">
            <div class="table-header">
                <div class="table-header-items width50">序号</div>
                <div class="table-header-itemss"><span class="required">*</span>发票类型</div>
                <div class="table-header-items"><span class="required">*</span>发票照片</div>
                <div class="table-header-items"><span class="required">*</span>是否需要验真</div>
                <div class="table-header-itemss"><span class="required">*</span>验真结果</div>
                <div class="table-header-items"><span class="required">*</span>是否重复</div>
                <div class="table-header-items"><span class="required">*</span>发票编号</div>
                <div class="table-header-items"><span class="required">*</span>发票金额</div>
                <div class="table-header-items"><span class="required">*</span>税费金额</div>
                <div class="table-header-items"><span class="required">*</span>发票日期</div>
                <div class="table-header-items width60">操作</div>
            </div>
            <div class="table-body" v-for="(item,index) in details" :key="index">
                <!-- 序号 -->
                <div class="table-body-items width50">{{index+1}}</div>
                <!-- 发票类型 -->
                <div class="table-body-itemss">
                    <el-radio v-model="item.invoice_type" label="10">增值税专用发票</el-radio><br>
                    <el-radio v-model="item.invoice_type" label="20">增值税普通发票</el-radio>
                </div>
                <!-- 发票照片 -->
                <div class="table-body-items1">
                    <el-upload
                        class="upload"
                        name="file"
                        :headers="headers"
                        :limit="1"
                        :before-upload="handleBeforeUpload"
                        :http-request="uploadFile"
                        :multiple="true"
                        :file-list="fileList">
                        <el-button type="text" @click="handleClick(index)" size="small" icon="el-icon-upload">点击上传</el-button>
                    </el-upload>
                </div>
                <!-- 是否需要验真 -->
                <div class="table-header-items width200 lineheight80">
                    <div class="textaligncenter needs" v-if="item.need_check == 1">需要</div>
                    <div class="textaligncenter no-needs" v-else-if="item.need_check ==2">不需要</div>
                    <div class="textaligncenter" v-else></div>
                </div>
                <!-- 验真结果 -->
                <div class="table-header-items width200" v-if="item.need_check == 1">
                    <div class=" flex_1" v-if="item.check_pass==1">
                        <div class="left1">验证通过</div>
                        <div class="right1"><img src="../../../assets/flowlist/effective.png"></div>
                    </div>
                    <div class="flex_1" v-else-if="item.check_pass==2">
                        <div class="left1">验证不通过</div>
                        <div class="right1"><img src="../../../assets/flowlist/invalid.png"></div>
                    </div>
                    <div class="flex_1" v-else>
                        <div class="left1"></div>
                        <div class="right1"></div>
                    </div>
                </div>
                <div class="table-header-items width200" v-else-if="item.need_check == 2">--</div>
                <div class="table-header-items width200" v-else></div>
                <!-- 是否重复 -->
                <div class="table-header-items width200">
                    <div class=" flex_1" v-if="item.used==1">
                    <div class="left1">重复</div>
                    <div class="right1"><img src="../../../assets/flowlist/repeat.png"></div>
                    </div>
                    <div class="flex_1" v-else-if="item.used==0">
                    <div class="left1">不重复</div>
                    <div class="right1"><img src="../../../assets/flowlist/no-repeat.png"></div>
                    </div>
                    <div class="flex_1" v-else>
                    <div class="left1"></div>
                    <div class="right1"></div>
                    </div>
                </div>
                <!-- 发票编号 -->
                <div class="table-body-items">
                    <el-input v-model="item.invoice_num" placeholder="请输入"></el-input>
                </div>
                <!-- 发票金额 -->
                <div class="table-body-items">
                    <el-input v-model="item.invoice_amount" placeholder="请输入"></el-input>
                </div>
                <!-- 税费金额 -->
                <div class="table-body-items">
                    <el-input v-model="item.tax_amount" placeholder="请输入"></el-input>
                </div>
                <!-- 发票日期 -->
                <div class="table-body-items">
                    <el-input v-model="item.invoice_date" placeholder="请输入"></el-input>
                </div>
                <!-- 操作 -->
                <div class="table-body-items operate width60">
                    <el-link :disabled="details.length == 1" @click="del(index)" type="primary">删除</el-link>
                </div>
            </div>
            <el-button @click="add" class="el-button" icon="el-icon-plus">新增</el-button>
        </div>
    </div>
</template>
<script>
import { v4 as uuidv4 } from "uuid";
import axios from 'axios'
import { baseUrl } from "@/config/env";
import {distInvoice}from '@/api/user.js';
export default {
  data(){
    return{
        // 发票类型、发票编号、发票金额、税费金额、发票日期、发票照片
        details:[
            {
                invoice_type:'10',//发票类型
                invoice_num:"",//发票编号
                invoice_amount:"",//发票金额
                tax_amount:'0',//税费金额
                invoice_date:"",//发票日期
                invoice_img_file_id:"",//发票照片
                check_pass:0,//验证是否通过
                check_result:'',//验证结果
                need_check:'',//是否需要验证
                used:2,//验重
            }
        ],
        fileList:[],
        index:0,
        loading:false
    }
  },
  watch:{
    details:{
        immediate:true,
        deep:true,
        handler(v){
            this.$emit("details",v)
        }
    }
  },
  methods:{
    del(index){
        this.details.splice(index,1)
    },
    handleClick(index){
        this.index = index
    },
    handleBeforeUpload(file) {
        const uploadLimit = 3
        const uploadTypes = ['jpg', 'png', 'jpeg', 'pdf']
        const filetype = file.name.replace(/.+\./, '')
        const isRightSize = (file.size || 0) / 1024 / 1024 < uploadLimit
        if (!isRightSize) {
            this.$message.error('文件大小超过 ' + uploadLimit + 'MB')
            return false
        }
        if (uploadTypes.indexOf(filetype.toLowerCase()) === -1) {
            this.$message.warning({
                message: '仅支持上传图片和PDF'
            })
            return false
        }
      return true
    },
    uploadFile(file) {
        var formdata = new FormData()
        formdata.append("file", file.file)
        this.loading = true
        axios({
          method: 'post',
          url:`${baseUrl}/upload/oss`,
          headers: {'Content-Type': 'multipart/form-data'},
          data:formdata
        }).then(res => {
          if(res.data.success){
           
            if(res.data.data && res.data.data.fileId){
                //上传文件的接口调用成功,然后调用发票识别的接口
                this.details[this.index].invoice_img_file_id = res.data.data.fileId
                this.distInvoice(res.data.data.fileId)
            }
          }
        })
	},
    distInvoice(fileId){
        let data = [fileId]
        let result
        distInvoice(data).then(res => {
            if(res.data && res.data.success){
                result = res.data.data
                this.loading = false
                if(result && result.total_amount){}
                if(result.list && result.list.length == 1){
                    let currentinvoice = result.list[0]
                    this.details[this.index].invoice_date = currentinvoice.invoice_date//发票日期
                    this.details[this.index].invoice_num = currentinvoice.invoice_num//发票编号
                    this.details[this.index].invoice_amount = currentinvoice.total_amount//发票金额

                    this.details[this.index].check_pass = currentinvoice.check_pass//验真结果
                    this.details[this.index].need_check = currentinvoice.need_check//是否需要验真
                    this.details[this.index].used = currentinvoice.used//验重

                // check_pass:0,//验证是否通过
                // check_result:'',//验证结果
                // need_check:'',//是否需要验证
                // used:2,//验重

                }

            }
        })
    },
    add(){
        this.details.push(
            {
                invoice_type:'10',//发票类型
                invoice_num:"",//发票编号
                invoice_amount:"",//发票金额
                tax_amount:'0',//税费金额
                invoice_date:"",//发票日期
                invoice_img_file_id:"",//发票照片
            }
        )
    }
  }
}
</script>
<style scoped>
  .table-header{
    height: 40px;
    background: rgb(247, 247, 247);
    display: flex;
    flex-direction: row;
  }
  .table-body{
    height: 80px;
    background: #fff;
    display: flex;
    flex-direction: row;
  }
  .table-header-items{
    width: 200px;
    text-align: center;
    line-height: 40px;
    border: 1px solid #f2f2f2;
    font-size: 16px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .table-header-itemss{
    width: 200px;
    text-align: center;
    line-height: 40px;
    border: 1px solid #f2f2f2;
    font-size: 16px;
    font-weight: 400;
  }
    .table-body-items{
        width: 200px;
        text-align: center;
        line-height: 80px;
        border: 1px solid #f2f2f2;
        font-size: 14px;
        font-weight: 400;
    }
    .table-body-itemss{
        width: 200px;
    }
    .table-body-items1{
        width: 200px;
        text-align: center;
        line-height: 40px;
        border: 1px solid #f2f2f2;
        font-size: 14px;
        font-weight: 400;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .table-body-itemss{
        width: 200px;
        text-align: left;
        line-height: 40px;
        border: 1px solid #f2f2f2;
        font-size: 14px;
        font-weight: 400;
    }
    .operate{
        color: #FE6350;
    }
    .operate:hover{
        cursor: pointer;
    }
    .el-button{
        margin-top: 8px;
    }
    .visibility{
        visibility: hidden;
    }
    .required{
        color: #FE6350;
        font-size: 18px;
        position: relative;
        top: 3px;
        right: 3px;
    }
    
.left1{
  width: 50%;
  height: 100%;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.right1{
  width: 50%;
  height: 100%;
  text-align: center;
}
.right1 > img{
  width: 42.5px;
  height: 37px;
  margin-top: 10px;
}
.flex_1{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 14px;
}
.textaligncenter{
  text-align: center;
}
.no-needs{
  color: #FE6350;
}
.needs{
  color: #10A300;
  
}
.lineheight80{
    line-height: 80px;
}
.table-box{
    width: 1600px;
}
.width50{
    width: 50px !important;
}
.width60{
    width: 60px;
}
</style>